
<template>
  <div class="input-bottom-dialogue">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
            <div class="main-content">
              <div class="timer">
                <div class="input-tip-title">
                  <div class="tip">
                    <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
                  </div>
                  <div class="title">旅游时间</div>
                </div>
                <div class="category-list">
                  <el-form label-width="70" style="margin-left: 8px;margin-bottom: 10px;" :inline="true"
                           :model="formInline" class="demo-form-inline" ref="formRefOne"  >

                    <el-form-item label="到达时间" prop="arriveTime">
                      <el-date-picker
                          @change="changeSelect"
                          v-model="formInline.arriveTime"
                          type="date"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          placeholder="请选择">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="离开时间" prop="leaveTime">
                      <el-date-picker
                          @change="changeSelect"
                          v-model="formInline.leaveTime"
                          type="date"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          placeholder="请选择">
                      </el-date-picker>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <div class="timer">
                <div class="input-tip-title entourage-list">
                  <div style="display: flex;align-items:  center; ">
                    <div class="tip">
                      <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
                    </div>
                    <div class="title">随行人员</div>
                  </div>
                  <div @click="addEntourage" class="title" style="display: flex;align-items: center;cursor: pointer">
                    <div class="tip">
                      <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/add@2x.png">
                    </div>
                    <div>添加人员</div>
                  </div>
                </div>
                <div class="category-list">
                  <el-form ref="formRefTwo"  label-width="70" style="margin-left: 8px;margin-bottom: 10px;" :inline="true" :model="formInline" class="demo-form-inline">

                    <div v-for="(item,index) in entourage" style="margin-bottom: 10px">
                      <el-form-item label="姓名" prop="name">
                        <el-input @change="changeSelect" v-model="entourage[index].name" placeholder="请输入"></el-input>
                      </el-form-item>
                      <el-form-item label="出生年月" prop="birthday">
                        <el-date-picker
                            @change="changeSelect"
                            v-model="entourage[index].birthday"
                            type="date"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="请选择">
                        </el-date-picker>
                      </el-form-item>
                    </div>
                  </el-form>
                </div>
              </div>
              <div class="timer">
                <div class="input-tip-title">
                  <div class="tip">
                    <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
                  </div>
                  <div class="title">旅游爱好</div>
                </div>
                <div class="category-list">
                  <el-form ref="formRefThree"  label-width="70" style="margin-left: 8px;margin-bottom: 10px;" :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="历史文旅" style="margin-bottom: 10px" prop="travelInterestHistory">
                      <el-select @change="changeSelect" v-model="formInline.travelInterestHistory" placeholder="请选择">
                        <el-option
                            v-for="(item,index) in TravelHobbyList[0].informationNames"
                            :key="item.id"
                            :label="item.landmarkName"
                            :value="item.landmarkName">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="民俗文旅" style="margin-bottom: 10px" prop="travelInterestFolkways">
                      <el-select @change="changeSelect" v-model="formInline.travelInterestFolkways" placeholder="请选择">
                        <el-option
                            v-for="(item,index) in TravelHobbyList[1].informationNames"
                            :key="item.id"
                            :label="item.landmarkName"
                            :value="item.landmarkName">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="名人文旅" style="margin-bottom: 10px" prop="travelInterestCelebrity">
                      <el-select @change="changeSelect" v-model="formInline.travelInterestCelebrity" placeholder="请选择">
                        <el-option
                            v-for="(item,index) in TravelHobbyList[2].informationNames"
                            :key="item.id"
                            :label="item.landmarkName"
                            :value="item.landmarkName">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="红色文旅" prop="travelInterestRed">
                      <el-select @change="changeSelect" v-model="formInline.travelInterestRed" placeholder="请选择">
                        <el-option
                            v-for="(item,index) in TravelHobbyList[3].informationNames"
                            :key="item.id"
                            :label="item.landmarkName"
                            :value="item.landmarkName">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="美食文旅" prop="travelInterestGourmet">
                      <el-select @change="changeSelect" v-model="formInline.travelInterestGourmet" placeholder="请选择">
                        <el-option
                            v-for="(item,index) in TravelHobbyList[4].informationNames"
                            :key="item.id"
                            :label="item.landmarkName"
                            :value="item.landmarkName">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="网红文旅"  prop="travelInterestInfluencer">
                      <el-select @change="changeSelect" v-model="formInline.travelInterestInfluencer" placeholder="请选择">
                        <el-option
                            v-for="(item,index) in TravelHobbyList[5].informationNames"
                            :key="item.id"
                            :label="item.landmarkName"
                            :value="item.landmarkName">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <div class="timer">
                <div class="input-tip-title">
                  <div class="tip">
                    <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
                  </div>
                  <div class="title">优先级排序</div>
                </div>
                <div class="category-list">
                  <el-form ref="formRefFour"  label-width="70" style="width:748px;margin-left: 8px;margin-bottom: 10px;" :model="formInline" class="demo-form-inline">
                    <el-form-item label="优先级别"  prop="priorityList">
                      <el-select @change="changeSelect" multiple v-model="formInline.priorityList" placeholder="请选择" >
                        <el-option
                            v-for="item in TravelHobbyList"
                            :key="item.id"
                            :label="item.categoryName"
                            :value="item.categoryName">
                        </el-option>

                      </el-select>
                    </el-form-item>

                  </el-form>
                </div>
              </div>
            </div>
<!--        确定-->
        <div class="query-button-groups">
          <div class="btn-box" @click="goRegister">
            <div class="login-btn">
              确 定
            </div>
          </div>
          <div class="btn-box right-btn" @click="goAI">
            <div class="login-btn">
              AI智能生成
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
  <IntelligentlyGeneratedAI :label="intelligentlyLabel" :isTourist="isTouristType"
                            :typeRoute="PREDICT_STATUS.TouristRoutePlanning"
                            :aiDataList="currentNavigationList"
                            @nextPageRoute="nextPageRoute" v-if="currentNavigation"/>
</template>
<script setup>

import {reactive, ref} from "vue";
import api from "@/service/TouristHomepage";
import {useTouristHomepageStore} from "@/store/touristHomepage";
import dayjs from "dayjs";
import IntelligentlyGeneratedAI from "@/views/home/components/PreTripPlanning/IntelligentlyGeneratedAI.vue";
import {PREDICT_STATUS} from "@/utils/consts";
const $emit = defineEmits(['nextPageRoute'])
const intelligentlyLabel=ref('以下是3条从太原出发去晋祠由远到近的路线规划,请选择适合您的路线:');
const formInline=reactive({
  arriveTime: '',
  leaveTime: '',
  // 随行人员
  entourage:'',
  // 优先级排序
  priorityList:[],
  priorityLevel:'',
//   历史文旅
  travelInterestHistory:'',
//   民俗文旅
  travelInterestFolkways:'',
//   名人文旅
  travelInterestCelebrity:'',
//   红色文旅
  travelInterestRed:'',
//   美食文旅
  travelInterestGourmet:'',
//   网红文旅
  travelInterestInfluencer:'',

})
const TravelHobbyList=ref([
    {
      categoryName: '历史文旅',
      id: '1',
      value:'',
      isShow:false,
    },
    {
      categoryName: '民俗文旅',
      id: '2',
      value:'',
      isShow:false,
    },
    {
      categoryName: '名人文旅',
      id: '3',
      value:'',
      isShow:false,
    },
    {
      categoryName: '红色文旅',
      id: '4',
      value:'',
      isShow:false,
    },
    {
      categoryName: '美食文旅',
      id: '5',
      value:'',
      isShow:false,
    },
    {
      categoryName: '网红文旅',
      id: '6',
      value:'',
      isShow:false,
    }
])
const isTouristType=ref(false);
// 随行人员数组
const entourage=ref([
  {
    name:'',
    birthday:'',
  }
]);
function addEntourage(){
  entourage.value.push({
    name:'',
    birthday:'',
  })

}
function goRegister(){
//   按照这个格式姓名|出生年月,姓名|出生年月
  let entourageStr='';
  for(let i=0;i<entourage.value.length;i++){
    entourageStr+=entourage.value[i].name+'|'+entourage.value[i].birthday+','
  }
  formInline.priorityLevel =formInline.priorityList.join(',')
  formInline.entourage=entourageStr;


  api.createOrUpdatetourist(formInline).then((res) => {
  });

}

const currentNavigationList=ref([]);
function goAI(){
  currentNavigation.value=true;
  useTouristHomepageStore().setTouristClearStatus(false)
  //   按照这个格式姓名|出生年月,姓名|出生年月
  let entourageStr='';
  for(let i=0;i<entourage.value.length;i++){
    entourageStr+=entourage.value[i].name+'|'+entourage.value[i].birthday+','
  }
  formInline.priorityLevel =formInline.priorityList.join(',')
  formInline.entourage=entourageStr;
  api.getTouristRouteList(formInline).then((res) => {
    console.log("旅游路线规划AI智能生成---",  res)
    currentNavigationList.value=res.data.answers;


  })
}
// 计算属性
const cityCode=computed(()=>{
  if(useTouristHomepageStore().setTouristCityInfo){
    return useTouristHomepageStore().setTouristCityInfo.cityCode;
  }
})
// 请求旅游信息-文化旅游一级分类类别列表数据
function getCategoryListApi(data){
  api.getCategoryList(data).then((res) => {

    TravelHobbyList.value.forEach(item=>{
      res.data.forEach(item1=>{
        if(Number(item.id)===Number(item1.id)){
          item.informationNames=item1.informationNames;
          item.categoryCode=item1.categoryCode;
          item.divisionName=item1.divisionName;
          item.divisionCode=item1.divisionCode;
        }
      })
    })

  });
}
function nextPageRoute(data){
  console.log('data',data)
//
  $emit('nextPageRoute',data)

}
const currentNavigation=ref(false);
// 监听useTouristHomepageStore().touristClearStatus
watch(() => useTouristHomepageStore().touristClearStatus, () => {
  if(useTouristHomepageStore().touristClearStatus){
    currentNavigation.value=false;
  //   清空form表单中的数据resetFields()
    resetForm();

  }
})

// 定义表单引用
const formRefOne = ref();
const formRefTwo = ref();
const formRefThree = ref();
const formRefFour = ref();
//重置表单
const resetForm = () => {
  formRefOne.value.resetFields();
  formRefTwo.value.resetFields();
  formRefThree.value.resetFields();
  formRefFour.value.resetFields();
  entourage.value=[{
    name:'',
    birthday:'',
  }]
};
function changeSelect(){
  useTouristHomepageStore().setTouristClearStatus(false)
}
// 查询用户配置路线信息
// todo 保留
function getUserInfoApi(){

}
onMounted(() => {
  getCategoryListApi({divisionCode:cityCode.value})
    })
</script>
<style scoped lang="scss">
@import "@/assets/main.scss";
//旅游路线规划
.input-bottom-dialogue{
  display: flex;
  margin-bottom: 20px;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 484px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 20px);
      .main-content{
        height: 85%;
        overflow: auto;
        .timer{
          border-bottom: 1px solid #EBD7C5;
          .entourage-list{
            justify-content: space-between;
            width:100%;
          }
          .input-tip-title{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .title{
              height: 16px;
              font-family: DingliesongtypefaceRegular;
              font-weight: 400;
              font-size: 16px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
          .category-list{
            display: flex;
            margin-top: 16px;
            //  换行
            flex-wrap: wrap;



          }
        }
      }

      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
//  旅游路线规划
.specifics{
  margin-top: 20px;
}
</style>
<style>
@import "@/assets/main.scss";
</style>